<template>
    <div id="carouselExampleCaptions" class="carousel slide">
        <div class="carousel-indicators">
            <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
            <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
            <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
        </div>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="https://www.hbut.edu.cn/images/banner.jpg" class="d-block w-100 carousel-item-photo">
                <div class="carousel-caption custom-caption d-none d-md-block">
                    <p></p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="https://www.hbut.edu.cn/images/guoqingbanner.jpg" class="d-block w-100 carousel-item-photo">
                <div class="carousel-caption custom-caption d-none d-md-block">
                    <p></p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="https://www.hbut.edu.cn/images/jiaoyudah.png" class="d-block w-100 carousel-item-photo">
                <div class="carousel-caption custom-caption d-none d-md-block">
                    <p></p>
                </div>
            </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
    </div>
</template>

<script setup>

</script>

<style scoped>

.carousel-item {
    height: 65vh;
}

.carousel-item-photo {
    /* object-fit: cover; */
    height: 100%;
}

/* 设置轮播图父容器为相对定位 */
.carousel-inner {
    position: relative; /* 设置相对定位以使按钮相对于父容器定位 */
}

/* 增大按钮的大小 */
.carousel-control-prev, .carousel-control-next {
    position: absolute;
    top: 50%; /* 设置按钮的垂直居中 */
    transform: translateY(-50%); /* 用 translateY(-50%) 实现精确的垂直居中 */
    width: 60px; /* 设置按钮的宽度 */
    height: 60px; /* 设置按钮的高度 */
    font-size: 30px; /* 设置按钮图标的字体大小 */
    background-color: rgba(0, 0, 0, 0.5); /* 设置按钮的背景色 */
    border-radius: 50%; /* 让按钮变成圆形 */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* 给按钮添加阴影效果 */
}
.carousel-control-prev {
    left: 3vw;
}
.carousel-control-next {
    right: 3vw;
}

/* 增大按钮图标的尺寸 */
.carousel-control-prev-icon, .carousel-control-next-icon {
    background-size: 40px 40px; /* 调整图标的大小 */
}
/* 悬停时改变按钮的背景颜色 */
.carousel-control-prev, .carousel-control-next {
    background-color: rgba(255, 0, 0, 0.7); /* 红色背景 */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3); /* 更强的阴影 */
}
.carousel-control-prev:hover, .carousel-control-next:hover {
    background-color: rgba(255, 0, 0, 1); /* 悬停时的红色背景 */
    cursor: pointer; /* 鼠标悬停时显示为手型 */
}

/* 定义轮播图文字背景样式 */
.custom-caption {
    background-color: rgba(0, 84, 165, 0.6); /* 蓝色半透明背景 */
    height: 60px;
    padding: 10px 20px 20px 20px; /* 内边距，增加背景框的大小 */
    color: #fff; /* 文字颜色为白色 */
    text-align: center; /* 文字居中对齐 */
    position: absolute; /* 使背景覆盖在图片上 */
    bottom: 20px; /* 离底部20px */
    left: 0;
    right: 0;
}

/* 调整文字样式 */
.custom-caption p {
    font-size: 1.5rem; /* 设置文字大小 */
    font-weight: bold; /* 设置文字加粗 */
    margin: 0; /* 移除段落默认外边距 */
}

</style>
